<template>
	<view>
		<view class="h-300 bg-blue-1 w-p-100">
			<uv-navbar title="练习" bgColor="none" placeholder fixed
				titleStyle="color:#fff;font-weight:600;font-size:34rpx;" leftIconColor='#fff'
				@leftClick="$page.switch('/pages/index/index')"></uv-navbar>
			<view class="mt-10 flex flex-center">
				<y-progress ref='progress' :width="200" :height="200"></y-progress>
			</view>
		</view>
		<view class="position-relative  right-0 left-0 px-20  top--50   box-sizing ">
			<view class="bg-white rounded-12 py-20 flex box">
				<view class="w-p-50 flex flex-column flex-center">
					<text class="fs-30 fw-600 text-blue-1">{{secondsToMS(detail?.time)}}</text>
					<text class="mt-8 fs-14 text-grey-1">考试用时</text>
				</view>
				<view class="w-p-50 flex flex-column flex-center">
					<text class="fs-30 fw-600 text-blue-1">{{detail?.correct}}</text>
					<text class="mt-8 fs-14 text-grey-1">正确数量</text>
				</view>
			</view>
		</view>

		<view class="px-20 popup">
			<view class="text-center py-20">
				<text class="fs-18 fw-600">答题卡</text>
			</view>
			<view class="flex">
				<view class="flex flex-y-center">
					<view class="rounded-circle w-7 h-7 bg-grey-1"></view>
					<view class="fs-14 ml-4">未答</view>
				</view>
				<view class="flex flex-y-center ml-20">
					<view class="rounded-circle w-7 h-7 bg-green-1"></view>
					<view class="fs-14 ml-4">答对</view>
				</view>
				<view class="flex flex-y-center ml-20">
					<view class="rounded-circle w-7 h-7 bg-red-1"></view>
					<view class="fs-14 ml-4">答错</view>
				</view>
			</view>
			<view class="dtk-box pb-20">
				<view v-for="(item,index) in topicList" :key='index'
					class="border-grey-1 w-40 h-40 rounded-circle text-grey-1 flex flex-center fs-17 mt-20 ml-4" :class="{
						'border-green-1 text-green-1':detail?.correct_ids.includes(item.id),
						'border-red-1 text-red-1':detail?.wrong_ids.includes(item.id)
						}">
					{{index + 1}}
				</view>
			</view>
		</view>

		<view class="px-30"  @click="openCert()" v-if="cert!=''">
			<view class="text-center py-8 rounded-30 bg-blue-1">
				<text class="fs-13 text-white">查看证书</text>
			</view>
		</view>

		<uv-popup ref="popup" :safeAreaInsetBottom='false' bgColor="none">
			<view class="text-center p-10">
				<text class="fs-18 fw-600">获得证书</text>
			</view>
			<image :src="cert" style="width: 100vw;" mode="widthFix"></image>
		</uv-popup>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	import { onLoad } from '@dcloudio/uni-app'
	import { $http, $page } from "@/utils";
	const progress = ref()
	const detail = ref()
	const topicList = ref([])
	const cert = ref('')
	const popup = ref()
	onLoad((option) => {
		getDetail(option.id)
	})

	const openCert = () => {
		popup.value.open('center')
	}
	const getDetail = (id) => {
		$http.get('TestPaper/getTopicRecord', { id: id }).then(res => {
			detail.value = res.data.detail
			topicList.value = res.data.list
			if (res.data.cert) {
				cert.value = res.data.cert.image
				popup.value.open('center')
			}
			setTimeout(() => {
				progressChange()
			}, 300)
		})
	}
	const progressChange = () => {
		if (progress.value) {
			progress.value.animate((detail.value.correct / detail.value.topic_num) * 100)
		}

	}
	//友好时间显示
	const secondsToMS = ((seconds) => {
		const m = Math.floor(seconds / 60);
		const s = seconds % 60;
		return `${padTo2Digits(m)}:${padTo2Digits(s)}`;
	})
	const padTo2Digits = ((num) => {
		return num.toString().padStart(2, '0');
	})
</script>

<style>
	.box {
		box-shadow: 0px 30px 40px -20px #dedfe6;
	}

	.dtk-box {
		display: grid;
		grid-template-columns: repeat(6, 16.666%);
	}
</style>